<template>
  <el-dialog title="修改密码" v-model="visible" width="550px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
    <el-form :model="form" class="form" ref="formRef" :label-width="100" label-position="left" :show-message="false">
      <el-form-item label="当前密码" prop="oldPassword" required>
        <el-input v-model="form.oldPassword" type="password" placeholder="请输入密码" class="site-input" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword" :rules="{ required: true, validator: validatePassword, trigger: 'blur' }">
        <el-input v-model="form.newPassword" type="password" class="site-input" placeholder="长度应为6-15个字符,必须包含大写、小写字母和数字" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="replyPassword" :rules="{ required: true, validator: validateNewPwd, trigger: 'blur' }">
        <el-input v-model="form.replyPassword" type="password" placeholder="再次输入登录密码" class="site-input" show-password></el-input>
      </el-form-item>

      <el-form-item class="btns">
        <Button class="is-plain" label="取消" @click="onCancelClick" />
        <Button type="primary" label="确认" @click="onSubmitClick" />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { reactive, computed, ref, toRefs, nextTick } from 'vue'
import api from '@/api'
import md5 from 'js-md5'
import { ElMessage } from 'element-plus'
import Button from '@/components/button/button.vue'

const props = defineProps(['visible'])
const emit = defineEmits(['update:visible'])

const form = reactive({
  oldPassword: '',
  newPassword: '',
  replyPassword: ''
})

const formRef = ref(null)

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

const validatePassword = (rule, value, callback) => {
  const reg = /^(?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[0-9].*)[a-zA-Z0-9^%&*@#,;\=\?\!$]{6,15}$/
  if (!value || !reg.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}

const validateNewPwd = (rule, value, callback) => {
  if (value && value === form.newPassword) {
    callback()
  } else {
    callback(new Error())
  }
}

const save = async () => {
  let { err } = await api.post(`/medinstrument/third/supplier/changePassword?newPassword=${md5(form.newPassword)}&oldPassword=${md5(form.oldPassword)}`)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('修改密码成功')
    hide()
  }
}

const onCancelClick = () => {
  hide()
}

const hide = () => {
  nextTick(() => {
    formRef.value.clearValidate()
    formRef.value.resetFields()
  })
  visible.value = false
}

const onSubmitClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save()
    }
  })
}
</script>

<style scoped lang="scss">
.form {
  .site-input {
    width: 410px;
  }

  .type {
    display: flex;

    .invoicetype {
      padding: 10px 12px;
      border: 1px solid #ccc;
      margin-right: 20px;
      text-align: center;
      line-height: 20px;
      position: relative;
      cursor: pointer;

      .triangle {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }

    .activeinvoicetype {
      border: 1px solid var(--color-primary);
    }

    .invocontent {
      width: 52px;
      height: 40px;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
